<template>
    <div class="panel-tab__content">
        <el-form
            :model="flowConditionForm"
            label-width="90px"
            size="mini"
            @submit.native.prevent
        >
            <el-form-item label="流转类型">
                <el-select
                    v-model="flowConditionForm.type"
                    @change="updateFlowType"
                >
                    <el-option label="普通流转路径" value="normal" />
                    <el-option label="默认流转路径" value="default" />
                    <el-option label="条件流转路径" value="condition" />
                </el-select>
            </el-form-item>
            <el-form-item
                label="条件格式"
                v-if="flowConditionForm.type === 'condition'"
                key="condition"
            >
                <el-select v-model="flowConditionForm.conditionType">
                    <el-option label="表达式" value="expression" />
                    <el-option label="脚本" value="script" />
                </el-select>
            </el-form-item>
            <el-form-item
                label="表达式"
                v-if="
                    flowConditionForm.conditionType &&
                        flowConditionForm.conditionType === 'expression'
                "
                key="express"
            >
                <el-input
                    v-model="flowConditionForm.body"
                    clearable
                    @change="updateFlowCondition"
                />
            </el-form-item>
            <template
                v-if="
                    flowConditionForm.conditionType &&
                        flowConditionForm.conditionType === 'script'
                "
            >
                <el-form-item label="脚本语言" key="language">
                    <el-input
                        v-model="flowConditionForm.language"
                        clearable
                        @change="updateFlowCondition"
                    />
                </el-form-item>
                <el-form-item label="脚本类型" key="scriptType">
                    <el-select v-model="flowConditionForm.scriptType">
                        <el-option label="内联脚本" value="inlineScript" />
                        <el-option label="外部脚本" value="externalScript" />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="脚本"
                    v-if="flowConditionForm.scriptType === 'inlineScript'"
                    key="body"
                >
                    <el-input
                        v-model="flowConditionForm.body"
                        type="textarea"
                        clearable
                        @change="updateFlowCondition"
                    />
                </el-form-item>
                <el-form-item
                    label="资源地址"
                    v-if="flowConditionForm.scriptType === 'externalScript'"
                    key="resource"
                >
                    <el-input
                        v-model="flowConditionForm.resource"
                        clearable
                        @change="updateFlowCondition"
                    />
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'FlowCondition',
    props: {
        businessObject: Object,
        type: String
    },
    data() {
        return {
            flowConditionForm: {}
        }
    },
    watch: {
        businessObject: {
            immediate: true,
            handler() {
                this.$nextTick(() => this.resetFlowCondition())
            }
        }
    },
    methods: {
        resetFlowCondition() {
            this.bpmnElement = window.bpmnInstances.bpmnElement
            this.bpmnElementSource = this.bpmnElement.source
            this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef
            if (
                this.bpmnElementSourceRef &&
                this.bpmnElementSourceRef.default &&
                this.bpmnElementSourceRef.default.id === this.bpmnElement.id
            ) {
                // 默认
                this.flowConditionForm = { type: 'default' }
            } else if (!this.bpmnElement.businessObject.conditionExpression) {
                // 普通
                this.flowConditionForm = { type: 'normal' }
            } else {
                // 带条件
                const conditionExpression = this.bpmnElement.businessObject
                    .conditionExpression
                this.flowConditionForm = {
                    ...conditionExpression,
                    type: 'condition'
                }
                // resource 可直接标识 是否是外部资源脚本
                if (this.flowConditionForm.resource) {
                    this.$set(this.flowConditionForm, 'conditionType', 'script')
                    this.$set(
                        this.flowConditionForm,
                        'scriptType',
                        'externalScript'
                    )
                    return
                }
                if (conditionExpression.language) {
                    this.$set(this.flowConditionForm, 'conditionType', 'script')
                    this.$set(
                        this.flowConditionForm,
                        'scriptType',
                        'inlineScript'
                    )
                    return
                }
                this.$set(this.flowConditionForm, 'conditionType', 'expression')
            }
        },
        updateFlowType(flowType) {
            // 正常条件类
            if (flowType === 'condition') {
                this.flowConditionRef = window.bpmnInstances.moddle.create(
                    'bpmn:FormalExpression'
                )
                window.bpmnInstances.modeling.updateProperties(
                    this.bpmnElement,
                    {
                        conditionExpression: this.flowConditionRef
                    }
                )
                return
            }
            // 默认路径
            if (flowType === 'default') {
                window.bpmnInstances.modeling.updateProperties(
                    this.bpmnElement,
                    {
                        conditionExpression: null
                    }
                )
                window.bpmnInstances.modeling.updateProperties(
                    this.bpmnElementSource,
                    {
                        default: this.bpmnElement
                    }
                )
                return
            }
            // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
            if (
                this.bpmnElementSourceRef.default &&
                this.bpmnElementSourceRef.default.id === this.bpmnElement.id
            ) {
                window.bpmnInstances.modeling.updateProperties(
                    this.bpmnElementSource,
                    {
                        default: null
                    }
                )
            }
            window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
                conditionExpression: null
            })
        },
        updateFlowCondition() {
            let {
                conditionType,
                scriptType,
                body,
                resource,
                language
            } = this.flowConditionForm
            let condition
            if (conditionType === 'expression') {
                condition = window.bpmnInstances.moddle.create(
                    'bpmn:FormalExpression',
                    { body }
                )
            } else {
                if (scriptType === 'inlineScript') {
                    condition = window.bpmnInstances.moddle.create(
                        'bpmn:FormalExpression',
                        { body, language }
                    )
                    this.$set(this.flowConditionForm, 'resource', '')
                } else {
                    this.$set(this.flowConditionForm, 'body', '')
                    condition = window.bpmnInstances.moddle.create(
                        'bpmn:FormalExpression',
                        { resource, language }
                    )
                }
            }
            window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
                conditionExpression: condition
            })
        }
    },
    beforeDestroy() {
        this.bpmnElement = null
        this.bpmnElementSource = null
        this.bpmnElementSourceRef = null
    }
}
</script>
